<template>
  <div class="column-detail-page w-75 mx-auto">
    <div class="column-info row mb-4 border-bottom pb-4 aligin-items-centter">
      <div class="col-3 text-center">
        <img :src="column.avatar.url" alt="" class="rounded-circle border" />
      </div>
      <div class="col-9">
        <h4>{{ column.title }}</h4>
      </div>
    </div>
    <PostList :list="list"></PostList>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
import PostList from '@/components/PostList.vue'

export default defineComponent({
  components: {
    PostList
  },
  setup () {
    // 它是一个函数，调用之后可以返回对应的对象
    const route = useRoute()
    const store = useStore()
    const currenId = route.params.id

    onMounted(() => {
      // 专栏详情
      store.dispatch('fetchColumn', currenId)
      // 文章列表
      store.dispatch('fetchPosts', currenId)
    })
    const column = computed(() => store.getters.getColumnById(currenId))
    const list = computed(() => store.getters.getPostById(currenId))
    // router.push('/login')
    // onMounted(() => {
    //   console.log(column)
    //   console.log(list)
    // })
    return {
      column,
      list
    }
  }
})
</script>

<style scoped></style>
